<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 80px; width: 100%"></div>
		<div class="imgBox"><img src="/src/assets/page/10.png" alt="" /></div>
		<!-- 个人标题 -->
		<div class="ryan f f-a-c f-j-c f-d-c">
			<div class="img">
				<img class="avart" :src="obj.sellerAvatar" alt="" />
				<div class="dui"><img src="/src/assets/page/4.png" class="duihao" alt="" /></div>
			</div>
			<div class="amacher">{{ obj.sellerFirstName }}{{ obj.sellerLastName }}</div>
			<div class="founder">{{ joip }}</div>
			<div class="seattle f f-a-c"><img src="/src/assets/page/8.png" alt="" /> Location: {{ obj.countryName }}{{ obj.stateName }}{{ obj.cityName }} | 18:30</div>
			<div class="topcs f f-a-c">
				<div class="top">Topics:</div>
				<div class="topItem" v-for="(item, index) in obj.sellerTopicNames" :key="index">{{ item }}</div>
			</div>
			<div class="copunt">
				{{ obj.buyerMyDescribe }}
			</div>
			<div class="ask">Ask on Xpert</div>
			<div class="fenxiang hand f f-a-c">
				<div @click="shareBtn" class="lefBtn f f-a-c">
					<img src="/src/assets/page/6.png" class="leImg" alt="" />
					Share
				</div>
				<div @click="reports()" class="rigBtn hand f f-a-c">
					<img src="/src/assets/page/5.png" class="leImg" alt="" />
					Report
				</div>
			</div>
			<div class="xian"></div>
		</div>
		<!-- Clubs -->
		<div class="club m1280">
			<div class="titClub">Clubs</div>
			<div class="botDiv f f-a-c f-w-w">
				<div v-for="(item, index) in port.list" @click="goClub(item)" :key="index" class="hand botItem">
					<div style="width: 100%" class="f f-j-b">
						<div class="analy">
							<img :src="item.clubImage" class="imgTou" alt="" />
						</div>
						<div class="rigTou">
							<div class="topImg f f-a-c f-j-b">
								<div class="imgs f f-a-c">
									<div class="imgList f f-a-c">
										<div :key="inde" v-for="(ite, inde) in item.clubFans">
											<img :src="ite.avatar" class="touImg" alt="" />
										</div>
									</div>
									{{ item.fansNum }} Fans
								</div>
								<div class="rigIcon f f-a-c">
									<img @click.stop="ficle(item)" class="hand" v-if="item.favorite == 0" src="/src/assets/page/1.png" alt="" />
									<img @click.stop="cancelCollection(item)" class="hand" v-else src="/src/assets/page/01.png" alt="" />
									<img @click.stop="copyLoca" src="/src/assets/page/7.png" class="hand" alt="" />
								</div>
							</div>
							<div class="countNei">
								{{ item.introduction }}
							</div>
						</div>
					</div>
					<div class="f f-a-c f-j-b">
						<div class="sauad">{{ item.clubName }}</div>
						<div class="price f f-a-c">
							<div class="priceRig f f-a-c">
								<div class="pic">${{ item.discount }}/Month</div>
								<div class="month">${{ item.subscription }}/month</div>
								<div :class="{ btnAct: item.subscriptionId != null && item.subscriptionId > 0 }" @click.stop="joinIn(item)" class="hand btn">
									{{ item.subscriptionId != null && item.subscriptionId > 0 ? "Joined" : "Join" }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="more hand m1280">Moer</div> -->
			<div style="margin: 80px" class="hand">
				<div class="example-pagination-block f f -a-c f-j-c">
					<el-pagination @size-change="sizeChange" :default-page-size="4" @current-change="currentChange" layout="prev, pager, next" :total="totlas" />
				</div>
			</div>
		</div>
		<Join ref="join" />
		<upLoad @reportObj="reportObj" ref="upLoads" />
		<userModule @initObj="initObj" @initGigs="initGigs" ref="addRef" />
		<OutClub @refresh="refresh" ref="outClub" />

		<xpertTabbar />
	</div>
</template>

<script setup>
	import OutClub from "@/components/OutClub/index.vue";
	import { ref, onMounted, reactive } from "vue";
	import { copy } from "../../../utils/setting";
	import { ElMessage, dayjs } from "element-plus";
	import Join from "@/components/join/index.vue";
	import {
		ClubFounderInformation,
		ReportUsers,
		PeopleAlso,
		TenrendsList,
		ClbusList,
		CollectionClub,
		RecentlyView,
		ArticleListPorifile,
		InspireByTrends,
		PeopleAlsoView,
		RecentlyArtile,
		CancelCollectionClub
	} from "@/api/knowClub/index.js";
	import { MyPageView } from "@/api/xpert.js";
	import UserModule from "./userModule.vue";
	import { FreeMode } from "swiper/modules";
	import { Swiper, SwiperSlide } from "swiper/vue";
	import "swiper/swiper-bundle.css";
	import upLoad from "./upLoad.vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import { useRoute } from "vue-router";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";

	import "swiper/css";
	import "swiper/css/navigation";
	import "swiper/css/pagination";
	import "swiper/css/scrollbar";
	import "swiper/css/free-mode";
	let modules = [FreeMode];
	let statusTab = ref(1);
	let upLoads = ref(null);
	let join = ref("");
	let outClub = ref("");
	let route = useRoute();
	let obj = ref({});
	let totlas = ref(0);
	let addRef = ref(null);
	let joip = ref("--");
	let pageNum = ref(1);
	let port = reactive({
		list: [],
		articeList: [],
		peopleList: [],
		trendsList: [],
		recentlyViewList: [],
		peopAlsoLis: [],
		tenrendsList: [],
		recentlyArtileList: []
	});
	let pageSize = ref(4);
	let userId = JSON.parse(localStorage.getItem("userInfo")).userId;
	let id = ref(route.query.id);
	onMounted(async () => {
		await initMyPorfile();
		await clbusList();
		await ArticleList();
		await peopleList();
		await trends();
		await recentlyList();
		await alsoList();
		await tenrendsList();
		await aentlyArtile();
		window.addEventListener("scroll", handleScroll);
	});
	const goClub = item => {
		router.push({
			path: "/Club",
			query: {
				id: item.id
			}
		});
	};
	// ============================================================================================
	// 点击收藏
	const ficle = async item => {
		console.log(item, "99999999999");
		addRef.value.type = 3;
		// 执行获取列表
		await addRef.value.initList();
		addRef.value.clubId = item.id;
		addRef.value.dialogTableVisible = true;
	};
	// 点击取消收藏俱乐部
	const cancelCollection = async item => {
		let n = await CancelCollectionClub({
			clubId: item.id
		});
		if (n.code == 200) {
			// 更新
			clbusList();
		}
	};
	// 刷新
	const refresh = async () => {
		console.log("1111111111111111111111111");
		await clbusList();
		await ArticleList();
		await peopleList();
		await trends();
		await recentlyList();
		await alsoList();
		await tenrendsList();
	};
	const joinIn = item => {
		console.log(item, "111111111111");
		if (item.subscriptionId != null && item.subscriptionId > 0) {
			// 代表已经加入俱乐部
			outClub.value.id = item.subscriptionStripeId;
			outClub.value.upLoadVisible = true;
		} else {
			// 代表未加入俱乐部
			join.value.obj = item;
			join.value.money = item.subscription;
			join.value.upLoadVisible = true;
		}
	};
	const initGigs = () => {
		// 更新
		clbusList();
	};
	const initObj = () => {
		// 更新
		myPageView();
	};
	// 获取gigs
	const gigsListFn = async () => {
		let n = await ListBySeller({ userId: userId.value });
		port.gigsList = n.data;
		// port.sectList = n.data;
		port.gigsList.forEach(element => {
			element.stupShow = false;
		});
	};
	// 个人信息
	const myPageView = async () => {
		let n = await MyPageView({ userId: userId.value });
		obj.value = n.data;
		// 语言
		language.value = obj.value.language.join(",");
		// 工作职位
		if (obj.value.workExperience[0]) {
			joip.value = obj.value.workExperience[0].position + "@" + obj.value.workExperience[0].company;
		}
	};
	const copyLoca = () => {
		const text = window.location.href;
		copy(text);
	};
	// ============================================================================================

	const currentChange = e => {
		pageNum.value++;
		clbusList();
	};
	// 点击收藏俱乐部
	const Collection = async () => {
		let n = await CollectionClub({
			clubId: "",
			groupId: ""
		});
	};
	const aentlyArtile = async () => {
		let n = await RecentlyArtile({
			userId: id.value
		});
		port.recentlyArtileList = n.data;
	};
	const tenrendsList = async () => {
		let n = await TenrendsList();
		port.tenrendsList = n.data.list;
	};
	//people also view
	const alsoList = async () => {
		let n = await PeopleAlso();
		port.peopAlsoLis = n.data.list;
	};
	// recentlyList
	const recentlyList = async () => {
		let n = await RecentlyView({
			userId: id.value
		});
		port.recentlyViewList = n.data;
	};
	// /俱乐部inspire by trends
	const trends = async () => {
		let n = await InspireByTrends();
		port.trendsList = n.data.list;
	};
	// 获取people also view列表
	const peopleList = async () => {
		let n = await PeopleAlsoView();
		port.peopleList = n.data.list;
	};
	// 获取artice列表
	const ArticleList = async () => {
		let n = await ArticleListPorifile({ paeNum: 1, pageSize: 4, userId: id.value });
		port.articeList = n.data.list;
	};

	// 获取clbusList
	const clbusList = async () => {
		console.log(pageNum.value, pageSize.value, id.value, "2222222222222222222222222");
		let n = await ClbusList({
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			userId: id.value
		});
		port.list = n.data.list;
		totlas.value = n.data.total;
	};
	// 个人信息
	const initMyPorfile = async () => {
		let n = await ClubFounderInformation({
			userId: id.value
		});
		obj.value = n.data;
		// 个人职位
		if (obj.value.sellerWorkExperience[0]) {
			joip.value = obj.value.sellerWorkExperience[0].position + "@" + obj.value.sellerWorkExperience[0].company;
		}
	};
	// 点击复制
	const shareBtn = () => {
		const text = window.location.href;
		copy(text);
	};
	// 点击举报
	const reports = () => {
		upLoads.value.upLoadVisible = true;
	};
	// 举报请求
	const reportObj = async obj => {
		console.log(userId, obj, "222222222222");
		let n = await ReportUsers({
			reportUserIdentity: 2,
			foreignId: id.value,
			reportContent: obj.content,
			reportImages: obj.imgList
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
		}
		upLoads.value.upLoadVisible = false;
	};
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 10) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
